<template>
  <div class="question-submit">
    <div style="padding: 0 10px 85px; background-color: #f5f5f5">
      <div
        v-for="bigItem in bigQuestionList"
        :key="bigItem.id"
        class="test-info"
      >
        <div v-html="bigItem.title"></div>
        <div v-html="bigItem.content" style="padding-top: 14px"></div>
        <div style="padding: 15px 0">
          <VanButton
            type="success"
            size="small"
            style="padding: 8px 15px"
            round
            color="#0CB76C"
          >
            重做该题
          </VanButton>
        </div>
        <div
          v-for="smallItem in bigItem.smallQuestionList"
          :key="smallItem.id"
          class="small-info"
        >
          <div v-html="smallItem.content"></div>
          <audio-box
            :smallItem="smallItem"
            @onPlay="(el) => onPlay(el, smallItem)"
            @onPause="smallItem.isPlay = false"
            @onPausePerv="onPausePerv"
            @onPlayEnd="
              () => {
                smallItem.isPlay = false;
                smallItem.percentage = 0;
                smallItem.currentTime = 0;
              }
            "
            @updateProgress="
              (ref) => {
                smallItem.currentTime = ref.currentTime; // 存时长
                smallItem.percentage = Math.floor(
                  (ref.currentTime / smallItem.audioDuration) * 100
                );
              }
            "
          />
        </div>
      </div>
    </div>
    <div class="btn">
      <VanButton
        size="small"
        color="linear-gradient( 270deg, #29F19C 0%, #02A1F9 100%)"
        @click="handleCompleteHomework()"
      >
        交作业
      </VanButton>
    </div>
  </div>
</template>
<script setup>
import AudioBox from "./AudioBox.vue";

import { defineProps, reactive, toRefs, defineEmits, ref, nextTick } from "vue";
import { Button as VanButton } from "vant";

const defaultQigQuestionList = [
  {
    id: 1,
    title: `<div>
              二、信息获取第二节 听选信息听三段对话，每段播放两遍。各段播放前你有10秒钟的阅题时间。各段播放后有两个问题。请根据所听到的问题和括号内的提示，在8秒钟内选择正确的信息口头回
              答问题。
              听第一段对话，回答两个问题。现在你有10秒钟的阅题时间。
            </div>`,
    smallQuestionList: [
      {
        id: "1-1",
        content: `<div>
              1. What is David doing on hiscomputer?(doing his homework / watching amatch /listening to music)
            </div>`,
        tapeFile: {
          src: "../yyds.mp3",
        }, //录音文件
        isPlay: false,
        currentTime: 0,
        percentage: 0,
        audioDuration: 19,
      },
    ],
  },
  {
    id: 2,
    title: `<div>
              二、信息获取第二节 听选信息听三段对话，每段播放两遍。各段播放前你有10秒钟的阅题时间。各段播放后有两个问题。请根据所听到的问题和括号内的提示，在8秒钟内选择正确的信息口头回
              答问题。
              听第一段对话，回答两个问题。现在你有10秒钟的阅题时间。
            </div>`,
    smallQuestionList: [
      {
        id: "2-1",
        content: `<div>
              1. What is David doing on hiscomputer?(doing his homework / watching amatch /listening to music)
            </div>`,
        tapeFile: {
          src: "../yyds.mp3",
        }, //录音文件
        isPlay: false,
        currentTime: 15,
        percentage: 0,
        audioDuration: 19,
      },
    ],
  },
];

const props = defineProps({
  bigQuestionList123: {
    // 大题列表 带小题列表
    type: Object,
    default: () => ({}),
  },
});
const state = reactive({
  bigQuestionList: defaultQigQuestionList,
  curAudioSrc: "",
  curPlayData: {}, // 当前在播放的
  curAudioObj: {}, // 存放当前在播放的audio的el和item
});
// 打开audio时存一下, 方便关闭
const onPlay = (el, smallItem) => {
  smallItem.isPlay = true;
  state.curAudioObj = {
    el,
    item: smallItem,
  };
};
// 关闭上一个开启的audio
const onPausePerv = () => {
  const { el: pervAudioEl, item: pervSmallItem } = state.curAudioObj;
  pervAudioEl && pervAudioEl.pause();
  state.bigQuestionList.forEach((bigItem) => {
    bigItem.smallQuestionList.forEach((smallItem) => {
      if (pervSmallItem && smallItem.id === pervSmallItem.id) {
        smallItem.isPlay = false;
      }
    });
  });
};
// 交作业
const handleCompleteHomework =  ()=> {

}

const { bigQuestionList } = toRefs(state);
</script>
<style scoped lang="scss">
.question-submit {
  .test-info {
    background: #ffffff;
    border-radius: 15px;
    padding: 10px 10px 15px;
    margin-top: 10px;
    font-size: 14px;
    color: #b5b5b5;
    font-weight: 500;
    .small-info {
      color: #333;
    }
  }
  .btn {
    padding: 10px;
    padding-top: 0;
    box-sizing: border-box;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    .van-button {
      height: 45px;
      width: 100%;
      border-radius: 20px;
      font-size: 18px;
      font-weight: 500;
    }
  }
}
</style>
